<template>
    <div class="detail-content-div">
        <el-row type="flex" justify="center">
            <el-col :span="13">
                <el-card :body-style="{ padding: '0px' }" class="content-card">
                    <el-col :span="6">
                        <el-card class="book-img-card" :body-style="{ padding: '0px' }" shadow="never">
                            <img :src=book.coverPicUrl class="book-img">
                        </el-card>
                    </el-col>
                    <el-col :span="18">
                        <el-card :body-style="{padding: '0px'}" class="content-detail-card01" shadow="never">
                            <p class="p-title">{{book.bookName}}</p>
                            <p>作者：{{book.author}} 出版社：南海出版社</p>
                            <p class="p-content">{{book.content}}</p>
                        </el-card>
                        <el-card :body-style="{padding: '0px'}" class="content-detail-card02" shadow="never">
                            <div class="price-and-amount-div">
                                <span class="price-span">价格：{{book.price}}￥</span>
                                <el-divider direction="vertical"></el-divider>
                                <span class="price-span">原价：{{book.originalPrice}}￥</span>
                                <el-divider direction="vertical"></el-divider>
                                <span class="amount-span">库存：{{book.stock}}件</span>
                            </div>
                            <div class="book-button-div">
                                <el-input-number class="wanted-counter" v-model="wantedCount" controls-position="right" :min="1" :max="book.stock" label="数量" size="mini">数量</el-input-number>
                                <el-button class="add-button" type="primary" size="small" round @click="AddtoList" v-if="this.isAdded" disabled>已添加到购书清单</el-button>
                                <el-button class="add-button" type="primary" size="small" round @click="AddtoList" v-if="!this.isAdded">添加到购书清单</el-button>
                                <el-button class="send-button" type="primary" size="small" round>发送购书邮件</el-button>
                            </div>
                        </el-card>
                        <el-card :body-style="{padding: '0px'}" class="content-detail-card03" shadow="never">
                            <el-col :span="12">
                                <div class="seller-kotoba-div">
                                    <p class="seller-kotoba-p01">卖家的话</p>
                                    <p class="seller-kotoba-p02">{{book.remark}}</p>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="seller-inf-div" v-if="this.$store.state.isLogin">
                                    <p>卖家信息</p>
                                    <p class="seller-inf-p">用户名：{{UserInfo.userName}}</p>
                                    <p class="seller-inf-p">微信号：{{UserInfo.wechatCode}}</p>
                                    <p class="seller-inf-p">邮箱：{{UserInfo.mailAddr}}</p>
                                </div>

                                <div class="go-to-login" v-if="!this.$store.state.isLogin">
                                    <p>卖家信息</p>
                                    <el-row class="showmore">
                                        <el-button @click="Gotologin">请先登录再查看</el-button>
                                    </el-row>
                                </div>

                            </el-col>
                        </el-card>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import VueEvent from "../../model/VueEvent";

    export default {
        name: "DetailContent",
        data(){
            return {
                book: {
                    /*url: "https://images-na.ssl-images-amazon.com/images/I/51sDzGa%2BpfL.__BG0,0,0,0_FMpng_AC_UL280_SR280,280_.jpg",
                    title: "醉步男",
                    author: "小林泰三",
                    content: "世界科幻文学至高代表作，日本狂销23年，终于引进正版！同时收录恐怖小说名篇《玩具修理者》"*/
                },
                UserInfo:[],
                wantedCount: 1,
                isAdded:false,

            }
        },
        methods:{
            Gotologin(){
                this.$router.push({name: "login", params: {bookInfo: this.book}});
            },
            AddtoList(){
                //console.log(this.$store.state.isLogin);
                if(this.$store.state.isLogin){
                    axios.post(
                        '/manager/addToShoppingList',
                        {
                            userInfoId:this.$store.state.userInfo.userInfoId,
                            bookId:this.book.bookId,
                            bookName:this.book.bookName,
                            bookUserId:this.UserInfo.userInfoId,
                            bookUserName:this.UserInfo.userName,
                            bookUserEmail:this.UserInfo.mailAddr,
                            count:this.wantedCount
                        }
                    ).then(response=>{
                        if(response.data.success)
                        {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.isAdded=true;
                        }
                        else{
                            this.$message.error('添加失败');
                        }
                    }).catch(error=>{

                    })
                }else{
                    this.$message('请先登录');
                    this.$router.push({name: "login", params: {bookInfo: this.book}});
                }
                //接口



            }
        },
        components:{

        },
        mounted() {
            var vm = this;
            vm.isAdded = false;
            //获取路由中的书籍信息参数
            vm.book = vm.$route.params.bookInfo;
            console.log(vm.book);
            //挂载页面时，若用户已经登录则获取卖家信息
            if (vm.$store.state.isLogin) {
                axios.get(
                    '/manager/getUserInfoByIds',
                    {
                        params: {
                            userInfoIds: vm.book.userInfoId,
                        }
                    }
                ).then(response => {
                    if (response.data.success) {
                        vm.UserInfo = response.data.data[0];
                        //console.log( vm.UserInfo)；
                    }
                }).catch(error => {

                });
                axios.get(
                    '/manager/isAddToShoppingList',
                    {
                        params: {
                            userInfoId: vm.$store.state.userInfo.userInfoId,
                            bookId: vm.book.bookId
                        }
                    }
                ).then(response => {
                    if (response.data.success) {
                        //console.log("校验是否添加到购书清单" + response.data.data);
                        if (response.data.data) {
                            vm.isAdded = false;
                        } else {
                            vm.isAdded = true;
                        }
                    } else {
                        console.log("failed to get");
                    }
                }).catch(error => {

                });
            }
        },
        beforeDestroy() {
            this.UserInfo=[];
            this.book={};
        }
    }
</script>

<style scoped>
    .showmore{
        height: 30px;
       /* text-align: center;*/
       /* padding: 30px;*/
        margin-bottom: 30px
    }

    .detail-content-div{
        height: 500px;
        background: #f0f0f0;
    }

    .content-card {
        margin-top: 40px;
        /*height: 420px;*/
    }

    .book-img-card {
        /*height: 420px;*/
        border-radius: 0;
        text-align: center;
    }

    .book-img {
        margin-top: 70px;
        height: 280px;
        width: 280px;
    }

    .content-detail-card01 {
        height: 160px;
        border-radius: 0;
    }

    .content-detail-card01 .p-title {
        margin: 20px 50px;
        font-size: 25px;
        color: #000;
        line-height: 30px;
        height: 30px;
    }

    .content-detail-card01 p{
        margin-left: 50px;
        font-size: 12px;
        color: #9e9e9e;
        height: 20px;
        line-height: 20px;
        text-align: left;
    }

    .content-detail-card01 .p-content {
        margin-left: 50px;
        font-size: 12px;
        color: #9e9e9e;
        height: 20px;
        line-height: 20px;
        text-align: left;
    }

    .content-detail-card02 {
        height: 120px;
        border-radius: 0;
    }

    .price-and-amount-div {
        margin: 20px 50px;
    }

    .book-button-div {
        margin-left: 50px;
    }

    .wanted-counter{
        margin-right: 20px;
    }

    .book-button-div .send-button {
        margin-left: 20px;
    }

    .price-and-amount-div span {
        font-size: 14px;
        color: #9e9e9e;
        height: 20px;
        line-height: 20px;
        text-align: left;
    }

    .content-detail-card03 {
        height: 140px;
        border-radius: 0;
    }

    .seller-kotoba-div {
        margin-left: 50px;
    }

    .seller-kotoba-div .seller-kotoba-p01{

    }

    .seller-kotoba-div .seller-kotoba-p02{
        font-size: 12px;
        color: #9e9e9e;
        height: 20px;
        line-height: 20px;
        text-align: left;
    }

    .seller-inf-div {
        margin-left: 40px;
    }

    .go-to-login{
        margin-left: 40px;
    }

    .seller-inf-div .seller-inf-p {
        font-size: 12px;
        color: #9e9e9e;
        height: 12px;
        line-height: 12px;
        text-align: left;
    }
    .el-col{
        height: auto;
    }
</style>